<template>
  <div class="product-menu-search">
    <el-cascader
      v-loading="loading"
      :value="value"
      :props="cascadeProps"
      :options="options"
      :placeholder="placeholder"
      clearable
      :show-all-levels="false"
      @change="changeValue"
    />
  </div>
</template>

<script>
import { t } from '@src/locales';
import { getTreeList } from '@src/api/ProductV2Api';

export default {
  name: 'product-menu-search',
  props: {
    field: {
      type: Object,
      default: null,
    },
    value: {
      type: [String, Array],
      default: '',
    },
  },
  data() {
    return {
      placeholder: t('common.placeholder.select'),
      options: [],
      loading: false,
      cascadeProps: {
        value: 'id',
        label: 'name',
        children: 'tasks',
        multiple: true,
        checkStrictly: false, // 支持任意一级选择
      }
    }
  },
  mounted() {
    this.getCatalogOption()
  },
  methods: {
    // 获取树结构
    async getCatalogOption () {
      try{
        this.loading = true
        let {code, result, message} = await getTreeList({conData: 0})
        this.loading = false
        if(code === 0) {
          this.deleteEmpty(result)
          this.options = result
        }else{
          this.$platform.notification({
            type: 'error',
            title: this.$t('common.base.tip.httpIsError'),
            message
          })
        }
      }catch(err){
        console.error(err);
      }
    },
    // 删除空子集
    deleteEmpty (list) {
      list.forEach(item => {
        if(!item.tasks.length){
          delete item.tasks;
        }else{
          this.deleteEmpty(item.tasks);
        }
      });
    },
    changeValue(value) {
      console.log(value, 'value111')
      this.$emit('update', value);
    }
  },
};
</script>

<style></style>
